<template>
  <div>
    <div id="container"></div>
  </div>
</template>
​
<script>
var geocoder;
export default {
  name: "Index",
  data() {
    return {
      longitude: "104.03817", //经度
      latitude: "30.619768", //纬度
      address: "",
      city: 2278,
      position: null,
      cityData: {},
    };
  },
  props: {
    mapData: {
      type: Object,
    },
  },

  methods: {
    /**
     * /定位获得当前位置信息
     */
    //定位获得当前位置信息
    getMyLocation() {
      var geolocation = new qq.maps.Geolocation(
        "YXSBZ-T5RWJ-375FU-FBPN7-QHVQK-BYB7L",
        "YXSBZ-T5RWJ-375FU-FBPN7-QHVQK-BYB7L-wj"
      );
      geolocation.getLocation(this.showPosition, this.showErr);
      //geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精确度比较高
    },
    showPosition(position) {
      this.latitude = position.lat;
      this.longitude = position.lng;
      this.city = position.city;
      this.setMap();
    },
    showErr() {
      this.getMyLocation(); //定位失败再请求定位，测试使用
    },
    search() {
      geocoder.getLocation(this.address);
    },
    //位置信息在地图上展示
    setMap(val) {
      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      //设置地图中心点
      var that = this;
      if (val) {
        this.latitude = val.lat;
        this.longitude = val.lng;
      }
      var myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);
      //定义工厂模式函数
      var myOptions = {
        zoom: 13, //设置地图缩放级别
        center: myLatlng, //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP, //设置地图样式详情参见MapType
        zoomControlOptions: {
          //设置缩放控件的位置为相对左方中间位置对齐.
          position: qq.maps.ControlPosition.RIGHT_TOP,
        },
        panControlOptions: {
          //设置平移控件的位置为相对右方中间位置对齐.
          position: qq.maps.ControlPosition.RIGHT_TOP,
        },
      };
      // //获取dom元素添加地图信息
      var map = new qq.maps.Map(
        document.getElementById("container"),
        myOptions
      );
      //第三部分
      //给定位的位置添加图片标注
      var marker = new qq.maps.Marker({
        position: myLatlng,
        map: map,
      });
      //添加信息窗口
      var info = new qq.maps.InfoWindow({
        map: map,
      });
      //获取标记的可拖动属性
      // info.open();
      // info.setContent(
      //   '<div style="text-align:center;white-space:nowrap;' +
      //     'margin:10px;">' +
      //     that.cityData.title +that.address+
      //     "</div>"
      // );
      // info.setPosition(marker.getPosition());
    },
  },
  watch: {
    mapData(val) {
      this.latitude = val.lat;
      this.longitude = val.lng;
      this.address = val.address;
      this.cityData = val;
      this.setMap();
    },
  },
  mounted() {
    // console.log(this.mapData, "+++++++++");
    if (!this.mapData) {
      let city = sessionStorage.getItem("city");
      if (city) {
        city = JSON.parse(city);
        this.cityData = city;
        this.city = city.id;
        this.longitude = city.lng ? city.lng : this.longitude;
        this.latitude = city.lat ? city.lat : this.latitude;
      }

      this.setMap();
    }
  },
};
</script>
​
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>